<template>
  <el-scrollbar :native="false" style="height: 100%">
    <div class="title">
      <h1>欢迎使用随机出题在线考试系统</h1>
      <h1 v-if="roleId == 1">学生：{{this.userName}}<el-row>您可以在本系统进行班级管理和在线考试</el-row></h1>
      <h1 v-else-if="roleId == 2">教师：{{this.userName}}<el-row>您可以在本系统进行班级管理、考试管理、考试统计</el-row></h1>
      <h1 v-else>管理员：{{this.userName}}<el-row>您拥有系统最高权限，可以使用所有系统功能</el-row></h1>
    </div>

  </el-scrollbar>
</template>

<script>
  export default {
    name: 'Dashboard',
    data(){
      return{
        roleId:localStorage.getItem('roleId'),
        userName:localStorage.getItem('username')
      }
    },
    created () {
      // 调用父组件Main的展示系统公告方法
      this.$emit('showSystemNotice')
    },
  }
</script>

<style scoped lang="scss">
  div {
    animation: leftMoveIn .7s ease-in;
  }

  @keyframes leftMoveIn {
    0% {
      transform: translateX(-100%);
      opacity: 0;
    }
    100% {
      transform: translateX(0%);
      opacity: 1;
    }
  }

  .title {
    text-align: center;
    font-size: 25px;
  }


  p {
    text-indent: 2em;
  }

  a {
    text-decoration: none
  }
</style>
